<template>
<!--  <div id="dd">-->
  <div>
    <el-container>
      <el-header>
        <h1>菜单</h1>
        登录人:{{this.username}}
      </el-header>
      <el-container>
        <el-aside width="200px">

          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              router
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
            <el-submenu index="1" v-for="m in menus" :key="m">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{m.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="ms in m.children" :key="ms.id" :index="ms.path">{{ms.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>

        </el-aside>
        <el-main>
          <br>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
<!--  </div>-->
</template>

<script>

export default {
  name: "TreeView",
  data() {
    return {
      username:'',
      menus:[]
    }
  }, methods: {
    list(){
      let id=localStorage.getItem("uid");
      this.axios.post("/user/getTree?id="+id).then(r=>{
        if (r.data.code==200){
          this.menus=r.data.data;
        }else {
          this.$message.error(r.data.msg);
        }
      })
    }
  }, created() {
    this.username=localStorage.getItem("username");
    this.list();
  }
}
</script>

<style scoped>
/*#dd{*/
/*  background:url("~@/assets/img.png");*/
/*  width:100%;*/
/*  height:100%;*/
/*  position:fixed;*/
/*  background-size:100% 100%;*/
/*}*/
</style>
